<script setup lang="ts">
// 导入倒计时工具
import { useCountDown } from '@vant/use'

// 组件属性定义
const props = defineProps(['show', 'activityData', 'LotteryState'])
const emit = defineEmits(['close', 'next', 'initConfig'])

// 倒计时状态
const isCountingDown = ref(true)

// 倒计时实例配置
const countDown = ref<any>(useCountDown({
  time: 0,
  onFinish: () => {
    // 倒计时结束时重新获取活动配置
    emit('initConfig')
  },
}))

/**
 * 监听活动倒计时数据变化
 * 当有倒计时且抽奖状态为中奖未充值时，启动倒计时
 * 否则停止倒计时
 */
watch(() => props.activityData.count_down, (newVal) => {
  if (newVal && props.activityData.lottery_state === props.LotteryState.Lottery) {
    countDown.value.reset(newVal * 1000)
    countDown.value.start()
    isCountingDown.value = true
  } else {
    countDown.value.reset(0)
    isCountingDown.value = false
  }
})
</script>

<template>
  <!-- 抽奖开始对话框 -->
  <van-dialog :show="show" title="" destroy-on-close class-name="custom-dialog activity-dialog"
    overlay-class="activity-dialog-overlay" teleport="body" :show-confirm-button="false" :show-cancel-button="false"
    @cancel="emit('close')">
    <div class="container">
      <!-- 主要内容区域 -->
      <div class="content">
        <!-- 关闭按钮 -->
        <NuxtImg class="close_img" src="/images/activity/cp/close.png" @click="emit('close')" />

        <!-- 顶部提示文字：根据倒计时状态显示不同内容 -->
        <div class="top_text" v-if="isCountingDown">
          {{ $t('activity.cp.top_text_1') }}
          <span>{{ $t('activity.cp.top_text_2') }}</span>
          <span class="amount">&nbsp;{{ apo.utils.formateAmountWithSymbol(activityData.reward || 0) }}&nbsp;</span>
          <span>{{ $t('activity.cp.top_text_3') }}</span>
        </div>
        <div class="top_text" v-else>
          {{ $t('activity.cp.top_text_1') }}
          <span class="amount">{{ $t('activity.cp.top_text_4') }}</span>
        </div>

        <!-- 奖励金额展示区域 -->
        <div class="bonus">
          <div class="amount">
            <div class="amount_t">
              {{ $t('activity.cp.free_amount') }} <span>{{ apo.utils.formateAmountWithSymbol(activityData.reward || 0)
                }}</span>
            </div>
            <div class="btn">
              {{ $t('activity.cp.no_bar') }}
              <div class="bar"></div>
            </div>
          </div>
        </div>

        <!-- 倒计时区域：中奖后显示倒计时 -->
        <div v-if="isCountingDown" class="count-down">
          <div>{{ $t('activity.cp.countdown_text_1') }} <span>{{ $t('activity.cp.countdown_text_2',
            [apo.utils.formateAmountWithSymbol(activityData.reward || 0)]) }}</span></div>
          <div>
            {{ pad2(countDown.current.hours) }}:{{ pad2(countDown.current.minutes) }}:{{ pad2(countDown.current.seconds)
            }}
          </div>
        </div>

        <!-- 兑换按钮区域：非倒计时状态显示 -->
        <div class="re_btn" v-else>
          <div v-click-move class="btn" @click="emit('next')">
            {{ $t('activity.cp.redeem_btn') }}
          </div>
        </div>

        <!-- 幸运号码标题 -->
        <div class="title">
          {{ $t('activity.cp.lucky_number') }}
        </div>

        <!-- 幸运号码球展示区域 -->
        <div class="ball">
          <div v-for="(number, index) in (activityData.reward_nums || [])" :key="index" class="ball-item">
            {{ number }}
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<style scoped lang="scss">
/* 抽奖开始对话框样式 */
.container {
  position: relative;

  .content {
    /* CSS 变量定义 */
    --bg-image: url(/images/activity/cp/bg2.png);
    --sem-btn-image: url(/images/activity/cp/sem_btn.png);
    --btn2-image: url(/images/activity/cp/btn2.png);

    position: relative;
    width: 8.6rem;
    height: 14.7rem;
    padding-top: 5rem;
    background: var(--bg-image) no-repeat;
    background-size: 100% 100%;
    will-change: transform;
    margin: 0 auto;

    /* 关闭按钮样式 */
    .close_img {
      position: absolute;
      top: 3.8rem;
      right: -0.5rem;
      width: 1.2rem;
      height: 1.2rem;
    }

    /* 顶部文字样式 */
    .top_text {
      margin: 0 auto;
      padding: 0 0.5rem;
      font-size: 0.38rem;
      color: #fff;
      text-align: center;
      line-height: 0.5rem;
      margin-top: 0.1rem;

      span {
        color: #ffa27e;
      }

      .amount {
        color: #f6ff00;
      }
    }

    /* 奖励金额展示区域样式 */
    .bonus {
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      padding: 0.5rem 0;
      padding-bottom: 0;

      .amount {

        /* 金额文字样式 */
        .amount_t {
          margin-bottom: 0.2rem;
          font-weight: 800;
          font-size: 0.44rem;
          background: linear-gradient(180deg, #fff 0%, #fe0 50%, #fa0 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          span {
            font-size: 0.54rem;
          }
        }

        /* 按钮样式 */
        .btn {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 5.6rem;
          height: 2rem;
          background: var(--sem-btn-image) no-repeat;
          background-size: 100% 100%;
          font-weight: 800;
          font-size: 0.54rem;
          color: #fff;
          overflow: hidden;
          border-radius: 0.4rem;

          /* 按钮光效动画 */
          .bar {
            position: absolute;
            left: 0.3rem;
            width: 5rem;
            height: 1.4rem;
            overflow: hidden;
            border-radius: 5rem;

            &:after {
              content: '';
              position: absolute;
              top: -50%;
              left: 0;
              width: 0.5rem;
              height: 200%;
              background: linear-gradient(90deg, #fff0, #ffffffb3, #fff0);
              transform: rotate(45deg);
              animation: shiny-btn-anim 2s ease-out infinite;
              opacity: 0;
            }
          }
        }
      }
    }

    /* 倒计时区域样式 */
    .count-down {
      color: #FDDEFF;
      font-size: 0.35rem;
      text-align: center;

      div:nth-child(1) {
        margin-top: 0.16rem;

        span {
          color: #FBFF00;
        }
      }

      div:nth-child(2) {
        background: url('/images/activity/cp/cp_Bg_01.png') no-repeat;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.54rem;
        color: #60F2FF;
        margin-top: 0.3rem;
        font-weight: 700;
      }
    }

    /* 兑换按钮区域样式 */
    .re_btn {
      display: flex;
      justify-content: center;
      width: 100%;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5.59rem;
        height: 2rem;
        line-height: 2rem;
        background: var(--btn2-image) no-repeat;
        background-size: 100% 100%;
        font-weight: 800;
        font-size: 0.54rem;
        color: #3B1D33;
      }
    }

    /* 幸运号码标题样式 */
    .title {
      padding: 0 0.5rem;
      font-size: 0.36rem;
      color: #9DF4FF;
      position: absolute;
      bottom: 2.4rem;
    }

    /* 幸运号码球容器样式 */
    .ball {
      position: absolute;
      left: 50%;
      bottom: 0.7rem;
      width: 7.6rem;
      height: 1.4rem;
      padding: 0 0.18rem;
      transform: translate(-50%);
      display: flex;
      background: #0009;
      border-radius: 0.3rem;
      background: url('/images/activity/cp/cp_Bg_02 1.png') no-repeat;
      background-size: 100% 100%;

      /* 号码球样式 */
      .ball-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.02rem;
        height: 1.02rem;
        font-weight: 800;
        font-size: 0.4rem;
        color: #000c;
        position: absolute;
        top: 0.19rem;

        /* 各个球的位置定位 */
        &:nth-child(1) {
          left: 0.18rem;
        }

        &:nth-child(2) {
          left: 1.42rem;
        }

        &:nth-child(3) {
          left: 2.65rem;
        }

        &:nth-child(4) {
          left: 3.95rem;
        }

        &:nth-child(5) {
          left: 5.15rem;
        }

        &:nth-child(6) {
          left: 6.38rem;
          color: #fff;
          /* 最后一个球特殊颜色 */
        }
      }
    }
  }
}

/* 按钮光效动画关键帧 */
@keyframes shiny-btn-anim {
  0% {
    left: -10%;
    opacity: 0;
  }

  20% {
    opacity: 0.5;
  }

  100% {
    left: 110%;
    opacity: 0;
  }
}
</style>
